<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站内容管理页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --success: #10B981;
      --danger: #EF4444;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      
      /* 不同风格主题色 */
      --style1: #3B82F6; /* 科技蓝 */
      --style2: #EC4899; /* 时尚粉 */
      --style3: #6366F1; /* 商务紫 */
      --style4: #0EA5E9; /* 清新蓝 */
      --style5: #84CC16; /* 活力绿 */
      --style6: #1F2937; /* 暗黑灰 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 主页面容器 */
    .content-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .content-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 18px;
      cursor: pointer;
      margin-left: 15px;
      transition: color 0.3s ease;
    }
    
    /* 内容管理工具栏 */
    .content-toolbar {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    
    .toolbar-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .create-btn {
      padding: 8px 16px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .create-btn i {
      margin-right: 6px;
    }
    
    /* 筛选栏 */
    .filter-bar {
      padding: 12px 20px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-tabs {
      display: flex;
      gap: 15px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 5px;
    }
    
    .filter-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .filter-tab {
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      cursor: pointer;
      white-space: nowrap;
    }
    
    .filter-tab.active {
      color: var(--primary);
    }
    
    .filter-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }
    
    /* 内容列表 */
    .content-list {
      flex-grow: 1;
      overflow-y: auto;
    }
    
    .content-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .content-item:hover {
      background-color: var(--light);
    }
    
    .content-info {
      display: flex;
      align-items: center;
      width: 80%;
    }
    
    .content-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background-color: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 20px;
      margin-right: 15px;
      flex-shrink: 0;
    }
    
    .content-details {
      flex-grow: 1;
      overflow: hidden;
    }
    
    .content-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .content-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--secondary);
    }
    
    .meta-status {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      margin-right: 10px;
    }
    
    .status-published {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--success);
    }
    
    .status-draft {
      background-color: rgba(107, 114, 128, 0.1);
      color: var(--secondary);
    }
    
    .status-scheduled {
      background-color: rgba(59, 130, 246, 0.1);
      color: var(--primary);
    }
    
    .content-actions {
      display: flex;
      align-items: center;
    }
    
    .action-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
      margin-left: 10px;
    }
    
    /* 编辑区域 */
    .editor-container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      padding: 15px 20px;
    }
    
    .editor-title {
      width: 100%;
      padding: 12px 0;
      border: none;
      border-bottom: 1px solid var(--border);
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 15px;
      background-color: transparent;
      color: var(--dark);
    }
    
    .editor-title::placeholder {
      color: var(--secondary);
    }
    
    .editor-content {
      flex-grow: 1;
      width: 100%;
      border: none;
      resize: none;
      font-size: 16px;
      line-height: 1.6;
      background-color: transparent;
      color: var(--dark);
    }
    
    .editor-content:focus, .editor-title:focus {
      outline: none;
    }
    
    .editor-toolbar {
      display: flex;
      padding: 10px 0;
      border-top: 1px solid var(--border);
      margin-top: 10px;
    }
    
    .editor-btn {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 18px;
      cursor: pointer;
      margin-right: 20px;
    }
    
    .editor-btn.primary {
      color: var(--primary);
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: var(--secondary);
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .empty-action {
      padding: 10px 20px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    
    .empty-action i {
      margin-right: 6px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：科技蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .content-item:nth-child(odd) {
      background-color: rgba(59, 130, 246, 0.02);
    }
    
    .style-1 .filter-tab.active {
      position: relative;
    }
    
    .style-1 .filter-tab.active::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px;
    }
    
    /* 风格2：时尚粉 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .page-header {
      background-color: var(--primary);
      color: white;
      border-bottom: none;
    }
    
    .style-2 .header-back,
    .style-2 .header-btn,
    .style-2 .page-title {
      color: white;
    }
    
    .style-2 .content-item {
      border-radius: 12px;
      margin: 10px 15px;
      padding: 15px;
      border-bottom: none;
      box-shadow: 0 2px 8px rgba(236, 72, 153, 0.05);
    }
    
    .style-2 .content-list {
      background-color: #FAFAFA;
      padding-top: 5px;
    }
    
    .style-2 .create-btn {
      border-radius: 20px;
      padding: 8px 20px;
    }
    
    /* 风格3：商务紫 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #FAF5FF;
    }
    
    .style-3 .content-toolbar {
      background-color: white;
      margin: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(99, 102, 241, 0.08);
      border-bottom: none;
    }
    
    .style-3 .filter-tab {
      background-color: white;
      padding: 5px 15px;
      border-radius: 15px;
      font-size: 14px;
    }
    
    .style-3 .content-item {
      background-color: white;
      border-radius: 10px;
      margin: 0 15px 10px;
      border-bottom: none;
    }
    
    /* 风格4：清新蓝 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .content-icon {
      border-radius: 50%;
      width: 44px;
      height: 44px;
    }
    
    .style-4 .content-title {
      font-size: 15px;
    }
    
    .style-4 .filter-bar {
      border-bottom: none;
      padding: 10px 20px;
    }
    
    .style-4 .content-item {
      padding: 12px 20px;
    }
    
    .style-4 .create-btn {
      background-color: transparent;
      color: var(--primary);
      border: 1px solid var(--primary);
    }
    
    /* 风格5：活力绿 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .content-toolbar {
      background-color: #ECFDF5;
      border-bottom: none;
    }
    
    .style-5 .content-icon {
      background-color: #F0FDF4;
      color: var(--primary);
    }
    
    .style-5 .filter-tab.active {
      color: var(--primary);
      font-weight: 600;
    }
    
    .style-5 .editor-toolbar {
      background-color: #F0FDF4;
      border-radius: 8px;
      margin: 10px -5px 0;
      padding: 10px 15px;
    }
    
    /* 风格6：暗黑灰 */
    .style-6 {
      --primary: #60A5FA;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-back,
    .style-6 .header-btn,
    .style-6 .page-title {
      color: var(--dark);
    }
    
    .style-6 .content-item {
      border-bottom-color: var(--border);
    }
    
    .style-6 .content-item:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .style-6 .content-icon {
      background-color: rgba(96, 165, 250, 0.1);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .content-title {
        font-size: 15px;
      }
      
      .create-btn span {
        display: none;
      }
      
      .create-btn i {
        margin-right: 0;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择内容管理样式</div>
    <div class="switcher-option active" data-style="1">科技蓝</div>
    <div class="switcher-option" data-style="2">时尚粉</div>
    <div class="switcher-option" data-style="3">商务紫</div>
    <div class="switcher-option" data-style="4">清新蓝</div>
    <div class="switcher-option" data-style="5">活力绿</div>
    <div class="switcher-option" data-style="6">暗黑灰</div>
  </div>
  
  <div class="container">
    <!-- 风格1：科技蓝 - 内容管理列表 -->
    <div class="content-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">内容管理</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-search"></i></button>
          <button class="header-btn"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="content-toolbar">
        <div class="toolbar-title">我的内容</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>创建内容</span>
        </button>
      </div>
      
      <div class="filter-bar">
        <div class="filter-tabs">
          <div class="filter-tab active">全部</div>
          <div class="filter-tab">已发布</div>
          <div class="filter-tab">草稿</div>
          <div class="filter-tab">定时发布</div>
          <div class="filter-tab">已删除</div>
        </div>
        <button class="filter-btn"><i class="fa fa-sort"></i></button>
      </div>
      
      <div class="content-list">
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">2023年社交媒体营销趋势分析</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>2小时前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-trash-o"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-image"></i>
            </div>
            <div class="content-details">
              <div class="content-title">产品发布会现场照片集锦</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>昨天 15:30</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-trash-o"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">如何有效提升社交账号互动率</div>
              <div class="content-meta">
                <span class="meta-status status-draft">草稿</span>
                <span>3天前编辑</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-trash-o"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-video-camera"></i>
            </div>
            <div class="content-details">
              <div class="content-title">新功能使用教程视频</div>
              <div class="content-meta">
                <span class="meta-status status-scheduled">定时发布</span>
                <span>明天 10:00</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-trash-o"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">用户体验优化计划与实施步骤</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>1周前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-trash-o"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：时尚粉 - 内容编辑页面 -->
    <div class="content-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">编辑内容</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-eye"></i></button>
          <button class="header-btn"><i class="fa fa-check"></i></button>
        </div>
      </div>
      
      <div class="editor-container">
        <input type="text" class="editor-title" placeholder="请输入标题..." value="夏季时尚搭配指南">
        
        <textarea class="editor-content" placeholder="请输入内容...">
夏季来临，如何在炎热天气中保持时尚感？本文将为你介绍今年夏季最流行的搭配趋势：

1. 轻盈面料：选择棉麻等透气材质，既舒适又时尚
2. 明亮色彩：珊瑚橙、天空蓝成为今年的主打色
3. 宽松剪裁： Oversize风格持续流行，兼具舒适与潮流
4. 配饰点睛：简约项链和宽檐帽是提升造型感的关键

搭配小贴士：上宽下窄或上窄下宽的比例法则能让整体造型更显高挑。

#时尚搭配 #夏季穿搭 #潮流趋势
        </textarea>
        
        <div class="editor-toolbar">
          <button class="editor-btn"><i class="fa fa-image"></i></button>
          <button class="editor-btn"><i class="fa fa-video-camera"></i></button>
          <button class="editor-btn"><i class="fa fa-smile-o"></i></button>
          <button class="editor-btn"><i class="fa fa-link"></i></button>
          <button class="editor-btn"><i class="fa fa-list-ul"></i></button>
          <button class="editor-btn primary"><i class="fa fa-tag"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 风格3：商务紫 - 企业内容管理 -->
    <div class="content-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">企业内容管理</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="content-toolbar">
        <div class="toolbar-title">部门内容库</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>新建文档</span>
        </button>
      </div>
      
      <div class="filter-bar">
        <div class="filter-tabs">
          <div class="filter-tab active">全部内容</div>
          <div class="filter-tab">营销材料</div>
          <div class="filter-tab">产品文档</div>
          <div class="filter-tab">活动方案</div>
          <div class="filter-tab">培训资料</div>
        </div>
        <button class="filter-btn"><i class="fa fa-filter"></i></button>
      </div>
      
      <div class="content-list">
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-pdf-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">Q2季度营销计划与预算方案</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>张经理 · 2天前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-powerpoint-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">新产品发布会演示文稿</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>李市场 · 1周前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-word-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">客户反馈分析报告</div>
              <div class="content-meta">
                <span class="meta-status status-draft">草稿</span>
                <span>王客服 · 昨天编辑</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-excel-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">上半年销售数据统计与分析</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>赵销售 · 2周前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-share-alt"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：清新蓝 - 个人内容中心 -->
    <div class="content-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">我的创作</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="content-toolbar">
        <div class="toolbar-title">内容统计</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>写点什么</span>
        </button>
      </div>
      
      <div class="filter-bar">
        <div class="filter-tabs">
          <div class="filter-tab active">全部</div>
          <div class="filter-tab">文章</div>
          <div class="filter-tab">问答</div>
          <div class="filter-tab">动态</div>
          <div class="filter-tab">收藏</div>
        </div>
        <button class="filter-btn"><i class="fa fa-calendar-o"></i></button>
      </div>
      
      <div class="content-list">
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-comment-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">推荐几个适合周末短途旅行的地方</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>2小时前 · 128赞</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-h"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-question-circle-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">初学者如何快速掌握摄影技巧？</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>昨天 · 36回答</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-h"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">年度读书清单与推荐理由</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>3天前 · 52收藏</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-h"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">个人成长计划：30天挑战</div>
              <div class="content-meta">
                <span class="meta-status status-draft">草稿</span>
                <span>未完成</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-h"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格5：活力绿 - 社区内容管理 -->
    <div class="content-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">社区管理</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-bell-o"></i></button>
        </div>
      </div>
      
      <div class="content-toolbar">
        <div class="toolbar-title">待审核内容</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>发布公告</span>
        </button>
      </div>
      
      <div class="filter-bar">
        <div class="filter-tabs">
          <div class="filter-tab active">待审核</div>
          <div class="filter-tab">已通过</div>
          <div class="filter-tab">已驳回</div>
          <div class="filter-tab">举报内容</div>
          <div class="filter-tab">社区公告</div>
        </div>
        <button class="filter-btn"><i class="fa fa-refresh"></i></button>
      </div>
      
      <div class="content-list">
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">环保生活小窍门分享</div>
              <div class="content-meta">
                <span class="meta-status">用户：绿叶子</span>
                <span>10分钟前提交</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn" style="color: var(--success)"><i class="fa fa-check"></i></button>
            <button class="action-btn" style="color: var(--danger)"><i class="fa fa-times"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-image"></i>
            </div>
            <div class="content-details">
              <div class="content-title">社区植树活动照片记录</div>
              <div class="content-meta">
                <span class="meta-status">用户：森林之子</span>
                <span>35分钟前提交</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn" style="color: var(--success)"><i class="fa fa-check"></i></button>
            <button class="action-btn" style="color: var(--danger)"><i class="fa fa-times"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-link"></i>
            </div>
            <div class="content-details">
              <div class="content-title">可持续发展相关资源汇总</div>
              <div class="content-meta">
                <span class="meta-status">用户：地球卫士</span>
                <span>2小时前提交</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn" style="color: var(--success)"><i class="fa fa-check"></i></button>
            <button class="action-btn" style="color: var(--danger)"><i class="fa fa-times"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-comment-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">关于减少塑料使用的讨论</div>
              <div class="content-meta">
                <span class="meta-status">用户：环保达人</span>
                <span>5小时前提交</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn" style="color: var(--success)"><i class="fa fa-check"></i></button>
            <button class="action-btn" style="color: var(--danger)"><i class="fa fa-times"></i></button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格6：暗黑灰 - 创作者内容中心 -->
    <div class="content-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">创作者中心</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-bar-chart"></i></button>
        </div>
      </div>
      
      <div class="content-toolbar">
        <div class="toolbar-title">内容管理</div>
        <button class="create-btn">
          <i class="fa fa-plus"></i>
          <span>发布</span>
        </button>
      </div>
      
      <div class="filter-bar">
        <div class="filter-tabs">
          <div class="filter-tab active">全部作品</div>
          <div class="filter-tab">热门内容</div>
          <div class="filter-tab">待更新</div>
          <div class="filter-tab">合作内容</div>
          <div class="filter-tab">已下架</div>
        </div>
        <button class="filter-btn"><i class="fa fa-filter"></i></button>
      </div>
      
      <div class="content-list">
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-video-camera"></i>
            </div>
            <div class="content-details">
              <div class="content-title">游戏开发进阶教程：角色动画</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>1.2k 观看 · 3天前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">2023年度独立游戏盘点</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>856 阅读 · 1周前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-file-text-o"></i>
            </div>
            <div class="content-details">
              <div class="content-title">从零开始学Unity：入门指南</div>
              <div class="content-meta">
                <span class="meta-status status-draft">草稿</span>
                <span>未完成 · 待更新</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
        
        <div class="content-item">
          <div class="content-info">
            <div class="content-icon">
              <i class="fa fa-image"></i>
            </div>
            <div class="content-details">
              <div class="content-title">概念艺术设计：未来城市</div>
              <div class="content-meta">
                <span class="meta-status status-published">已发布</span>
                <span>2.5k 浏览 · 2周前</span>
              </div>
            </div>
          </div>
          <div class="content-actions">
            <button class="action-btn"><i class="fa fa-pencil"></i></button>
            <button class="action-btn"><i class="fa fa-ellipsis-v"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const contentPages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化筛选标签
      initFilterTabs();
      
      // 初始化内容项点击
      initContentItems();
      
      // 初始化按钮事件
      initButtons();
    }
    
    // 初始化筛选标签切换
    function initFilterTabs() {
      document.querySelectorAll('.filter-tab').forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除同组所有标签的active类
          const tabContainer = this.parentElement;
          tabContainer.querySelectorAll('.filter-tab').forEach(item => {
            item.classList.remove('active');
          });
          
          // 给当前点击的标签添加active类
          this.classList.add('active');
        });
      });
    }
    
    // 初始化内容项点击事件
    function initContentItems() {
      document.querySelectorAll('.content-item').forEach(item => {
        item.addEventListener('click', function(e) {
          // 如果点击的是按钮，则不触发内容项点击事件
          if (e.target.closest('.action-btn')) {
            return;
          }
          
          const title = this.querySelector('.content-title').textContent;
          alert(`打开内容编辑：${title}`);
        });
      });
    }
    
    // 初始化按钮事件
    function initButtons() {
      // 返回按钮
      document.querySelectorAll('.header-back').forEach(button => {
        button.addEventListener('click', function() {
          alert('返回上一页');
        });
      });
      
      // 创建/发布按钮
      document.querySelectorAll('.create-btn, .header-btn .fa-check, .empty-action').forEach(button => {
        button.addEventListener('click', function() {
          alert('创建新内容');
        });
      });
      
      // 编辑按钮
      document.querySelectorAll('.action-btn .fa-pencil').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.content-item').querySelector('.content-title').textContent;
          alert(`编辑内容：${title}`);
        });
      });
      
      // 删除按钮
      document.querySelectorAll('.action-btn .fa-trash-o').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.content-item').querySelector('.content-title').textContent;
          if (confirm(`确定要删除 "${title}" 吗？`)) {
            alert('内容已删除');
          }
        });
      });
      
      // 审核通过按钮
      document.querySelectorAll('.action-btn .fa-check').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.content-item').querySelector('.content-title').textContent;
          alert(`已通过审核：${title}`);
        });
      });
      
      // 审核驳回按钮
      document.querySelectorAll('.action-btn .fa-times').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
          e.stopPropagation();
          const title = this.closest('.content-item').querySelector('.content-title').textContent;
          alert(`已驳回：${title}`);
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(contentPages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      contentPages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
